<!-- <template>
  <div class="service-management">
    <h2 class="page-title">新增服务管理</h2>

    <el-card class="module-card">
      <h3>服务详情</h3>
      <el-button type="primary" @click="addServiceDetailFlag = true">新增服务详情</el-button>
      <el-table :data="serviceDetails.list" stripe style="margin-top: 10px;">

      </el-table>

      <el-dialog v-model="addServiceDetailFlag" title="新增服务详情">
        <el-form :model="addServiceDetailForm" :rules="rules" ref="addServiceDetailFormRef" label-width="100px">
          <el-form-item label="服务名称" prop="serviceName">
            <el-input v-model="addServiceDetailForm.serviceName" placeholder="请输入服务名称" />
            <span class="form-hint">服务名称必须为 3 到 50 个字符</span>
          </el-form-item>
          <el-form-item label="描述" prop="details">
            <el-input type="textarea" v-model="addServiceDetailForm.details" placeholder="请输入描述" />
            <span class="form-hint">描述最多 200 个字符</span>
          </el-form-item>
          <el-form-item label="预计时间" prop="estimatedTime">
            <el-input v-model="addServiceDetailForm.estimatedTime" placeholder="请输入预计时间（数字）" />
            <span class="form-hint">预计时间必须为正整数</span>
          </el-form-item>
          <el-form-item label="服务条款" prop="terms">
            <el-input type="textarea" v-model="addServiceDetailForm.terms" placeholder="请输入服务条款" />
            <span class="form-hint">服务条款最多 300 个字符</span>
          </el-form-item>
          <el-form-item label="服务价格" prop="servicePrice">
            <el-input-number v-model="addServiceDetailForm.servicePrice" :min="0" placeholder="请输入服务价格" />
            <span class="form-hint">服务价格必须大于或等于 0</span>
          </el-form-item>
          <el-form-item label="类别id" prop="categoryId">
            <el-input v-model="addServiceDetailForm.categoryId" placeholder="请输入类别id（数字）" />
            <span class="form-hint">类别id必须为正整数</span>
          </el-form-item>
          <el-form-item label="服务图片">
            <el-upload class="upload-demo" action="/upload-url" :on-success="handleUploadSuccess" :show-file-list="false" :limit="1" :on-exceed="handleExceed">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <span class="form-hint">请上传一张图片</span>
          </el-form-item>
          <el-form-item label="服务流程" prop="processtemplateId">
            <el-input v-model="addServiceDetailForm.processtemplateId" placeholder="请输入服务流程" />
            <span class="form-hint">请输入有效的服务流程ID</span>
          </el-form-item>
          <el-form-item label="服务必需品" prop="itemstemplateId">
            <el-input v-model="addServiceDetailForm.itemstemplateId" placeholder="请输入服务必需品" />
            <span class="form-hint">请输入有效的必需品ID</span>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addServiceDetailFlag = false">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </span>
      </el-dialog>
    </el-card>


    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="500px">
      <el-form label-width="100px">
        <el-form-item v-for="(field, key) in dialogFields" :key="key" :label="field.label">
          <el-input v-if="field.type === 'input'" v-model="dialogData[key]" />
          <el-input-number v-if="field.type === 'number'" v-model="dialogData[key]" :min="1" />
          <el-input v-if="field.type === 'textarea'" v-model="dialogData[key]" type="textarea" />
          <el-upload v-if="field.type === 'image'" :action="field.uploadUrl" :show-file-list="false" :on-success="handleSuccess">
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveDialogData">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      upFlag: false,
      downFlag: false,
      changeDescriptionFlag: false,
      changeTermsFlag: false,
      deleteServiceDetailFlag: false,
      addServiceDetailFlag: false,
      requiredItems: { list: [] },
      serviceTypes: [],
      serviceDetails: { list: [] },
      serviceProcesses: { list: [] },
      dialogVisible: false,
      dialogTitle: '',
      dialogFields: {},
      dialogData: {},
      currentModule: '',
      addServiceDetailForm: {
        serviceName: '',
        details: '',
        estimatedTime: '',
        terms: '',
        servicePrice: 0,
        categoryId: 0,
        processesId: [],
        itemsId: [],
        processtemplateId: "",
        itemstemplateId: "",
        serviceImage: null,
      },
      header: {
        token: localStorage.getItem("token"),
      },
      defaultImage: 'path/to/default/image.png', 
      rules: {
        serviceName: [
          { required: true, message: '服务名称不能为空', trigger: 'blur' },
          { min: 3, max: 50, message: '服务名称长度在 3 到 50 个字符之间', trigger: 'blur' }
        ],
        details: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { max: 200, message: '描述不能超过 200 个字符', trigger: 'blur' }
        ],
        estimatedTime: [
          { required: true, message: '预计时间不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '预计时间必须为正整数', trigger: 'blur' }
        ],
        terms: [
          { required: true, message: '服务条款不能为空', trigger: 'blur' },
          { max: 300, message: '服务条款不能超过 300 个字符', trigger: 'blur' }
        ],
        servicePrice: [
          { required: true, message: '服务价格不能为空', trigger: 'blur' },
          { type: 'number', min: 0, message: '服务价格必须大于或等于 0', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '类别id不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '类别id必须为正整数', trigger: 'blur' }
        ],
      }
    };
  },

  methods: {
    save() {
      this.$refs.addServiceDetailFormRef.validate((valid) => {
        if (valid) {
          // 处理保存操作
          this.addServiceDetailFlag = false;
          this.resetForm();
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    resetForm() {
      this.addServiceDetailForm = {
        serviceName: '',
        details: '',
        estimatedTime: '',
        terms: '',
        servicePrice: 0,
        categoryId: 0,
      };
    },
    // 其他方法...
  },

  created() {
    // 初始化数据
  }
};
</script>

<style scoped>
.service-management {
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
  color: #ff6a00;
}

.module-card {
  margin-bottom: 20px;
}

.form-hint {
  font-size: 12px;
  color: #999;
  margin-top: 5px;
}
</style> -->
<template>
  <div class="service-management">
    <h2 class="page-title">新增服务管理</h2>

    <el-card class="module-card">
      <h3>服务流程</h3>
      <el-button type="primary" @click="toggleProcesses">{{ showProcesses ? '收起流程' : '展开流程' }}</el-button>
      <div v-show="showProcesses">
        <el-button type="primary" @click="openDialog('process')">新增流程</el-button>
        <el-table :data="serviceProcesses.list" stripe style="margin-top: 10px;">
          <el-table-column prop="processesId" label="流程id" />
          <el-table-column prop="processesName" label="流程名称" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="showChangePricePopover(scope.row)">修改流程单价</el-button>
              <el-button @click="confirmDeleteProcess(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-card class="module-card">
      <h3>流程必需品</h3>
      <el-button type="primary" @click="toggleItems">{{ showItems ? '收起必需品' : '展开必需品' }}</el-button>
      <div v-show="showItems">
        <el-button type="primary" @click="openDialog('necessity')">新增必需品</el-button>
        <el-table :data="requiredItems.list" stripe style="margin-top: 10px;">
          <el-table-column prop="itemsId" label="必需品编号" />
          <el-table-column prop="itemName" label="必需品名称" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="confirmDeleteRequiredItem(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog v-model="addServiceDetailFlag" title="新增服务详情">
      <el-form :model="addServiceDetailForm" :rules="rules" ref="addServiceDetailFormRef" label-width="100px">
        <el-form-item label="服务名称" prop="serviceName">
          <el-input v-model="addServiceDetailForm.serviceName" placeholder="请输入服务名称" />
        </el-form-item>
        <el-form-item label="描述" prop="details">
          <el-input type="textarea" v-model="addServiceDetailForm.details" placeholder="请输入服务描述" />
        </el-form-item>
        <el-form-item label="预计时间" prop="estimatedTime">
          <el-input v-model="addServiceDetailForm.estimatedTime" placeholder="请输入预计时间（数字）" />
        </el-form-item>
        <el-form-item label="服务条款" prop="terms">
          <el-input type="textarea" v-model="addServiceDetailForm.terms" placeholder="请输入服务条款" />
        </el-form-item>
        <el-form-item label="服务价格" prop="servicePrice">
          <el-input-number v-model="addServiceDetailForm.servicePrice" :min="0" placeholder="请输入服务价格" />
        </el-form-item>
        <el-form-item label="类别id" prop="categoryId">
          <el-input v-model="addServiceDetailForm.categoryId" placeholder="请输入类别id（数字）" />
        </el-form-item>
        <el-form-item label="服务流程" prop="processtemplateId">
          <el-input v-model="addServiceDetailForm.processtemplateId" placeholder="请输入服务流程" />
        </el-form-item>
        <el-form-item label="服务必需品" prop="itemstemplateId">
          <el-input v-model="addServiceDetailForm.itemstemplateId" placeholder="请输入服务必需品" />
        </el-form-item>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addServiceDetailFlag = false">取消</el-button>
          <el-button type="primary" @click="save">保存</el-button>
        </span>
      </el-form>
    </el-dialog>

    <!-- 其他弹窗 -->
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  data() {
    return {
      showProcesses: false,
      showItems: false,
      addServiceDetailFlag: false,
      requiredItems: { list: [] },
      serviceProcesses: { list: [] },
      addServiceDetailForm: {
        serviceName: '',
        details: '',
        estimatedTime: '',
        terms: '',
        servicePrice: 0,
        categoryId: 0,
        processtemplateId: "",
        itemstemplateId: "",
      },
      rules: {
        serviceName: [
          { required: true, message: '服务名称不能为空', trigger: 'blur' },
          { min: 3, max: 50, message: '服务名称长度在 3 到 50 个字符之间', trigger: 'blur' }
        ],
        details: [
          { required: true, message: '描述不能为空', trigger: 'blur' },
          { max: 200, message: '描述不能超过 200 个字符', trigger: 'blur' }
        ],
        estimatedTime: [
          { required: true, message: '预计时间不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '预计时间必须为正整数', trigger: 'blur' }
        ],
        terms: [
          { required: true, message: '服务条款不能为空', trigger: 'blur' },
          { max: 300, message: '服务条款不能超过 300 个字符', trigger: 'blur' }
        ],
        servicePrice: [
          { required: true, message: '服务价格不能为空', trigger: 'blur' },
          { type: 'number', min: 0, message: '服务价格必须大于或等于 0', trigger: 'blur' }
        ],
        categoryId: [
          { required: true, message: '类别id不能为空', trigger: 'blur' },
          { pattern: /^[1-9]\d*$/, message: '类别id必须为正整数', trigger: 'blur' }
        ],
      }
    };
  },

  methods: {
    toggleProcesses() {
      this.showProcesses = !this.showProcesses;
    },
    toggleItems() {
      this.showItems = !this.showItems;
    },

    save() {
      this.$refs.addServiceDetailFormRef.validate((valid) => {
        if (valid) {
          // 处理保存操作
          this.addServiceDetailFlag = false;
          this.resetForm();
          this.$message.success('服务详情已保存');
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    resetForm() {
      this.addServiceDetailForm = {
        serviceName: '',
        details: '',
        estimatedTime: '',
        terms: '',
        servicePrice: 0,
        categoryId: 0,
        processtemplateId: "",
        itemstemplateId: "",
      };
    },
    confirmDeleteProcess(row) {
      this.$confirm('确定要删除此流程吗？', '提示', { type: 'warning' }).then(() => {
        // 删除逻辑
        this.$message.success('流程已删除');
      });
    },
    confirmDeleteRequiredItem(row) {
      this.$confirm('确定要删除此必需品吗？', '提示', { type: 'warning' }).then(() => {
        // 删除逻辑
        this.$message.success('必需品已删除');
      });
    },
    showChangePricePopover(row) {
      // 显示修改价格的弹窗逻辑
    },
    openDialog(module) {
      if (module === 'process') {
        this.addServiceDetailFlag = true;
      } else if (module === 'necessity') {
        // 打开相应的弹窗
      }
    },
  },

  created() {
    // 初始化数据
    this.findServiceProcesses();
    this.findRequiredItems();
  },
};
</script>

<style scoped>
.service-management {
  padding: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 20px;
  color: #ff6a00;
}

.module-card {
  margin-bottom: 20px;
}
</style>